<template>
    <div class='top-bar'>
        <div class="inner">
            <div class="logo"/>
            <div class="nav">
                <top-item class="nav-item" key="1" to="/">首页</top-item>
                <top-item
                  class="nav-item"
                  @mouseenter="showMoreFn(item.id,true)"
                  @mouseleave="showMoreFn(item.id,false)"
                  :class="{ 'isShowMore' : isShowMore===item.id }"
                  v-for="item in navList"
                  :key="item.id"
                  :to="item.path">
                    <div>
                        <span>{{ item.name }}</span>
                        <div class="more">
                            <div class="more-inner">
                                <NuxtLink
                                  class="more-item"
                                  v-for="m in item.children"
                                  :to="item.path + '?id=' + m.id"
                                  :key="m.id">
                                    <span>{{ m.name }}</span>
                                </NuxtLink>
                            </div>
                        </div>
                    </div>
                </top-item>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getNavList } from '@/webApi/new'
import topItem from './components/item.vue'
const navList:Ref<Array<{
    id: number,
    path: string,
    name: string,
    children: Array<{
        id: number,
        name: string,
    }>
}>>  = ref([])
getNavList().then(res => {
	navList.value = res
})
const isShowMore:Ref<number> = ref(0)
const showMoreFn = (id:number, tag:boolean):void => {
    isShowMore.value = tag ? id : 0
}
</script>

<style lang="scss" scoped>
.top-bar{
    background: rgba(0, 0, 0, 0.67);
    box-shadow: 1px 2px 10px #0000002f;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 40px 20px 20px;
    .inner{
        width: 1358px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        .logo{
            background: url('@/assets/images/logo.png') no-repeat center center;
            width: 152px;
            height: 51px;
            &:hover{
                background: url('@/assets/images/logo-active.png') no-repeat;
            }
        }
        .nav{
            display: flex;
            .nav-item +.nav-item{
                margin-left: 20px;
            }
            .nav-item{
                position: relative;
                &.isShowMore .more{
                    grid-template-rows: 1fr;
                }
                .more{
                    display: grid;
                    grid-template-rows: 0fr;
                    transition: all 0.3s;
                    .more-inner{
                        overflow: hidden;
                    }
                    background: rgba(0, 0, 0, 0.67);
                    position: absolute;
                    top: 100%;
                    left:0;
                    width: 100px;
                    font-size: 14px;
                    .more-item{
                        display: block;
                        padding: 15px 15px;
                        color: #fff;
                        &:hover{
                            color:#d3ad6f ;
                        }
                    }
                }
            }
        }
    }
}
</style>